<template>
    <div class="container mx-auto">
        <topheader />
        <div class="min-h-screen bg-gray-50">
            <!-- 搜索区域 - 更现代化的样式和渐变背景 -->
            <section class="bg-gradient-to-r from-red-700 to-red-900 text-white py-10">
                <div class="container mx-auto px-4">
                    <h1 class="text-4xl font-bold mb-6 text-center">消防产品资讯平台</h1>
                    <div class="flex max-w-3xl mx-auto relative">
                        <input type="text" placeholder="消防产品信息查询...." class="flex-grow p-3 pl-5 rounded-l-md text-gray-700 text-base shadow-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                        <button class="bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-red-900 px-8 py-3 rounded-r-md font-bold text-base transition-all shadow-lg">
                            搜索
                        </button>
                    </div>
                </div>
            </section>

            <!-- 主要内容区域 - 使用卡片式设计 -->
            <div class="flex flex-col md:flex-row bg-base-100 p-4">
                <!-- 左侧分类菜单 - 增加视觉吸引力 -->
                <div class="w-full md:w-1/5 p-4 mb-4 md:mb-0">
                    <div class="bg-white rounded-lg shadow-md p-4">
                        <div class="text-2xl font-bold mb-4 text-red-800 border-b pb-2">全部分类</div>
                        <ul class="space-y-2">
                            <li v-for="(category, index) in categories" :key="index" 
                                class="hover:bg-red-50 rounded-md transition-colors">
                                <a class="flex items-center p-2 text-gray-700 hover:text-red-700">
                                    <img :src="category.image" alt="" class="w-8 h-8 mr-2 rounded-md object-cover">
                                    {{ category.title }}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <!-- 中央轮播图 - 增加阴影和圆角 -->
                <div class="w-full md:w-3/5 p-4">
                    <div class="rounded-xl overflow-hidden shadow-xl">
                        <Carousel />
                    </div>
                </div>

                <!-- 右侧信息区 - 更现代的卡片设计 -->
                <div class="w-full md:w-1/5 p-4">
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="stat">
                            <div class="stat-title text-red-800 font-medium">推荐产品</div>
                            <div class="stat-value text-3xl">310</div>
                            <div class="stat-desc text-gray-500">最近30天更新</div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow-md p-4 mb-4">
                        <div class="stat">
                            <div class="stat-title text-red-800 font-medium">推荐厂家</div>
                            <div class="stat-value text-3xl">1,200</div>
                            <div class="stat-desc text-gray-500">优质供应商</div>
                        </div>
                    </div>
                    
                    <div class="card bg-gradient-to-br from-blue-500 to-blue-700 text-white shadow-xl rounded-lg overflow-hidden">
                        <figure><img src="/images/Snipaste_2024-10-25_16-11-10.png" alt="客服" class="w-full h-32 object-cover" /></figure>
                        <div class="card-body">
                            <h2 class="card-title">即时通讯</h2>
                            <p>需要什么帮助吗?</p>
                            <div class="card-actions justify-end">
                                <button class="btn bg-white text-blue-700 border-none hover:bg-gray-100">马上联系</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主要内容 - 产品分类展示 -->
            <main class="container mx-auto px-4 py-8">
                <!-- 产品分类卡片 - 更吸引人的布局和动画效果 -->
                <section class="mb-12">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-3xl font-bold text-red-800">热门产品分类</h2>
                        <a href="/products" class="text-blue-600 hover:text-blue-800 font-medium flex items-center">
                            查看全部 <span class="ml-1">→</span>
                        </a>
                    </div>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
                        <div v-for="(category, idx) in categories" :key="idx" 
                             class="card bg-white shadow-md hover:shadow-xl transition-shadow rounded-lg overflow-hidden">
                            <figure class="relative h-48">
                                <img :src="category.image" class="w-full h-full object-cover" :alt="category.title" />
                            </figure>
                            <div class="card-body p-4">
                                <h2 class="card-title text-lg">{{ category.title }}</h2>
                                <p class="text-gray-600 text-sm">{{ category.subtitle }}</p>
                                <div class="card-actions justify-end mt-3">
                                    <div class="badge badge-outline bg-red-50 text-red-700 p-2">消防产品</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 最新资讯区块 - 现代化新闻卡片 -->
                <section class="mb-12 bg-white rounded-xl shadow-md p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-3xl font-bold text-red-800">最新资讯</h2>
                        <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">更多资讯</a>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div v-for="(news, idx) in latestNews" :key="idx" 
                             class="p-5 border border-gray-200 rounded-lg hover:border-red-300 transition-colors hover:bg-red-50">
                            <div class="flex items-start mb-3">
                                <img src="/images/csverse.png" alt="资讯图标" class="w-10 h-10 mr-3" />
                                <h3 class="font-bold text-lg">{{ news.title }}</h3>
                            </div>
                            <p class="text-gray-600">{{ news.excerpt || '了解更多消防行业前沿资讯，保障安全第一线。' }}</p>
                            <div class="mt-4 text-right">
                                <a href="#" class="text-red-600 hover:text-red-800 text-sm font-medium">阅读更多</a>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 推荐厂家 - 更专业的布局 -->
                <section class="mb-12">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-3xl font-bold text-red-800">推荐厂家</h2>
                        <a href="/factory" class="text-blue-600 hover:text-blue-800 font-medium">查看全部</a>
                    </div>
                    
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                        <div v-for="(manufacturer, idx) in featuredManufacturers" :key="idx"
                            class="bg-white p-4 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
                            <img src="../public/images/wallhaven-qzdqvr.jpg" alt="厂家logo" class="w-16 h-16 mx-auto mb-2 rounded-full object-cover" />
                            <div class="font-medium text-gray-800">{{ manufacturer.title }}</div>
                        </div>
                        
                        <!-- 添加额外的推荐厂家卡片 -->
                        <div v-for="i in 5" :key="`extra-${i}`"
                            class="bg-white p-4 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
                            <img :src="`/images/Snipaste_2024-10-25_16-1${i % 3 + 1}-00.png`" alt="厂家logo" class="w-16 h-16 mx-auto mb-2 rounded-full object-cover" />
                            <div class="font-medium text-gray-800">消防厂家 {{ i }}</div>
                        </div>
                    </div>
                </section>
                
                <!-- 新增区块：品质保证 -->
                <section class="mb-12 bg-gradient-to-r from-red-50 to-orange-50 rounded-xl p-8">
                    <div class="text-center mb-8">
                        <h2 class="text-3xl font-bold text-red-800 mb-2">品质保证</h2>
                        <p class="text-gray-600 max-w-3xl mx-auto">我们严格筛选消防产品供应商，确保每一件产品都符合国家安全标准，为您的安全保驾护航。</p>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="bg-white p-6 rounded-lg shadow-md text-center">
                            <img src="/images/csverse.png" alt="认证" class="w-16 h-16 mx-auto mb-4" />
                            <h3 class="font-bold text-xl mb-2 text-red-700">产品认证</h3>
                            <p class="text-gray-600">所有产品均通过国家消防认证，质量有保障</p>
                        </div>
                        
                        <div class="bg-white p-6 rounded-lg shadow-md text-center">
                            <img src="/images/csverse.png" alt="服务" class="w-16 h-16 mx-auto mb-4" />
                            <h3 class="font-bold text-xl mb-2 text-red-700">专业服务</h3>
                            <p class="text-gray-600">专业技术团队提供全方位服务支持</p>
                        </div>
                        
                        <div class="bg-white p-6 rounded-lg shadow-md text-center">
                            <img src="/images/csverse.png" alt="保障" class="w-16 h-16 mx-auto mb-4" />
                            <h3 class="font-bold text-xl mb-2 text-red-700">安全保障</h3>
                            <p class="text-gray-600">严格把控产品质量，确保消防安全无忧</p>
                        </div>
                    </div>
                </section>
            </main>

            <!-- 页脚 -->
            <foot />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 产品分类数据
const categories = ref([
    {
        title: "消防报警系统",
        subtitle: "专业火灾自动报警设备，守护生命安全",
        image: "/images/Snipaste_2024-10-25_16-11-10.png"
    },
    {
        title: "灭火设备",
        subtitle: "高效灭火装置，快速应对各类火灾",
        image: "/images/Snipaste_2024-10-25_16-11-57.png"
    },
    {
        title: "消防水系统",
        subtitle: "可靠的消防给水系统，确保灭火水源",
        image: "/images/Snipaste_2024-10-25_16-12-07.png"
    },
    {
        title: "防火材料",
        subtitle: "高品质防火材料，有效阻隔火势蔓延",
        image: "/images/Snipaste_2024-10-25_16-13-00.png"
    },
    {
        title: "应急照明设备",
        subtitle: "可靠的应急照明系统，提供紧急疏散指引",
        image: "/images/Snipaste_2024-10-25_16-11-57.png"
    },
    {
        title: "消防个人防护",
        subtitle: "专业消防防护装备，保障救援人员安全",
        image: "/images/Snipaste_2024-10-25_16-13-00.png"
    },
    {
        title: "消防通讯设备",
        subtitle: "高效消防通讯系统，确保指挥调度畅通",
        image: "/images/Snipaste_2024-10-25_16-11-10.png"
    },
    {
        title: "消防电源系统",
        subtitle: "可靠的消防应急电源，确保系统正常运行",
        image: "/images/Snipaste_2024-10-25_16-12-07.png"
    },
    {
        title: "灭火器材",
        subtitle: "各类灭火器材，适应不同场景需求",
        image: "/images/Snipaste_2024-10-25_16-11-22.png"
    },
    {
        title: "消防车辆装备",
        subtitle: "专业消防车辆及装备，快速响应火灾现场",
        image: "/images/card.jpg"
    }
]);

// 推荐厂家数据
const featuredManufacturers = ref([
    {
        title: "华安消防",
        subtitle: "专业消防设备制造商",
        image: "/images/wallhaven-qzdqvr.jpg"
    },
    {
        title: "安创消防",
        subtitle: "创新消防解决方案",
        image: "/images/wallhaven-qzdqvr.jpg"
    },
    {
        title: "国强消防",
        subtitle: "国家认证消防品牌",
        image: "/images/wallhaven-qzdqvr.jpg"
    },
    {
        title: "星火安防",
        subtitle: "一站式消防服务提供商",
        image: "/images/wallhaven-qzdqvr.jpg"
    },
    {
        title: "安泰消防",
        subtitle: "30年专注消防设备研发",
        image: "/images/wallhaven-qzdqvr.jpg"
    },
    {
        title: "守护者消防",
        subtitle: "高端消防设备定制专家",
        image: "/images/wallhaven-qzdqvr.jpg"
    }
]);

// 最新资讯数据
const latestNews = ref([
    { 
        title: '最新消防法规解读', 
        excerpt: '解读2024年最新消防安全法规，帮助企业合规发展' 
    },
    { 
        title: '智能消防系统趋势', 
        excerpt: 'AI赋能消防系统，提升火灾预警与应急响应能力' 
    },
    { 
        title: '高层建筑消防安全', 
        excerpt: '探讨高层建筑消防安全解决方案与实践案例' 
    }
]);

import Carousel from '@/components/Carousel.vue';
import topheader from '@/components/topheader.vue';
import foot from '@/components/foot.vue';
</script>

<style scoped>
/* 增加悬停动画效果 */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
}
</style>
